<template>
  <div>
    <vxe-table
      show-footer
      border
      height="100%"
      :data="baseTable"
      :footer-data="footerData"
      :menu-config="menuConfig"
      @menu-click="menuClick"
      ref="tableRef"
    >
      <vxe-column field="seq" type="seq" width="70"></vxe-column>
      <vxe-column field="name" title="姓名" sortable></vxe-column>
      <vxe-column field="sex" title="性别" sortable></vxe-column>
      <vxe-column field="role" title="权限" sortable></vxe-column>
      <vxe-column field="age" title="年龄" sortable></vxe-column>
      <vxe-column
        field="address"
        title="地址"
        show-overflow
        sortable
      ></vxe-column>
    </vxe-table>
  </div>
</template>
    
    <script lang="ts" setup>
import { ref, reactive } from "vue";
import type { VxeTablePropTypes, VxeTableInstance } from "vxe-table";
import baseTable from "./json/baseTable.json";

const tableRef = ref<VxeTableInstance>();

const footerData = ref<VxeTablePropTypes.FooterData>([
  { seq: "合计", age: "185" },
]);
//设置菜单的右侧命令
const menuConfig = reactive<VxeTablePropTypes.MenuConfig>({
  header: {
    options: [[{ code: "myExportMenu", name: "导出数据" }]],
  },
  body: {
    options: [
      [
        { code: "myExportMenu", name: "导出数据" },
        { code: "myPrintMenu", name: "打印" },
      ],
    ],
  },
});
const myExportMenu = () => {
  const tables = tableRef.value;
  if (tables) {
    tables.exportData();
  }
};
const myPrintMenu = () => {
  const tables = tableRef.value;
  if (tables) {
    tables.print();
  }
};
function menuClick(e: any) {
  const { code } = e.menu;
  if (code == "myExportMenu") {
    myExportMenu();
  } else if (code == "myPrintMenu") {
    myPrintMenu();
  }
}
</script>